// *{
//   border: solid;
//   margin: 0;
//   padding: 0;
// }

body{
  // min-height: 100vh;
  background: #f1f1f1;
  main{
    position: absolute;
    top: 50%;
    left: 50%;

    button{
      border: none;
      margin: 20px;
      padding: 24px;
      width: 220px;
      text-transform: uppercase;
      border-radius: 6px;
      cursor: pointer;
      color: white;
      background-size: 200%;
      transition: .6s;
      &:hover{
        background-position: right;
      }
    }
  }  
}

.btn1{
  background-image: linear-gradient(to left, #ffc312, #ee5a24, #ffc312);
}
.btn2{
  background-image: linear-gradient(to left, #c4e538, #009432, #c4e538);
}
.btn3{
  background-image: linear-gradient(to left, #12cbc4, #0652dd, #12cbc4);
}
.btn4{
  background-image: linear-gradient(to left, #fda7df, #9980fa, #fda7df);
}

